import { useEffect, useRef, memo } from "react";
import * as echarts from "echarts";
import styles from "./index.module.css";
import screenfull from "screenfull";
import { Button } from "antd";
const ReactEchartComponent = (props: any) => {
  const { option: chartOptions } = props;
  const dom: any = useRef();
  console.log(chartOptions, "chartOptions");
  useEffect(() => {
    if (chartOptions) {
      const chart = echarts.init(dom.current);
      chart.showLoading();
      chart.setOption(chartOptions);
      chart.hideLoading();
    }
  }, [chartOptions]);

  return (
    <div className={styles.chartsContainer}>
      <Button
        type="primary"
        onClick={() => {
          if (screenfull.isEnabled) {
            screenfull.request();
          }
        }}
      >
        全屏
      </Button>
      <Button
        type="primary"
        onClick={() => {
          if (screenfull.isEnabled) {
            screenfull.exit();
          }
        }}
      >
        退出全屏
      </Button>
      <div className={styles.chart} ref={dom}></div>
    </div>
  );
};

export default memo(ReactEchartComponent);
